<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>用户通用命令库</title>
	<link rel="stylesheet" href="../css/css.css">
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<link type="text/css" rel="Stylesheet" href="../css/generalCMD.css" />
	<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="../js/messagecenter.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript" src="../js/initPage.js"></script>
	<style type="text/css">
		.app_text{
			color:#04A0E9;
			cursor:pointer;
			margin-left:20px;
		}
		.app_text1{
			color:#04A0E9;
			cursor:pointer;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}
		.app_del{
			cursor:pointer;
			margin-left:20px;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 12px;
		}
		.text_name{
			text-align:left;
			text-indent: 12px;
		}
		.app_no{
			background-color: #83BE00;
			width: 50px;
			height: 18px;
			margin-left: 16%;
			text-indent: 7px;
			border-radius: 4px;
			color: #FFFFFF;
			font-weight: 600;
			padding-top: 2px;
		}
		#page ul li a{
			background-color: #009EE7;
			margin:0 10px;
		}
	</style>
</head>
<body>
<div class="left_content">
	<div class="left_block1">
		<div class="left_logo"></div>
		<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
		<div class="left_icons">
			<div class="left_icon1"></div>
			<div class="left_icon2"></div>
			<div class="left_icon3"></div>
		</div>
	</div>
	<div class="left_block2">
		<div class="left_menu">拓扑文件库</div>
		<div class="left_menu">逻辑预案库</div>
		<div class="left_menu">部署库</div>
		<div class="left_menu">监控</div>
		<div class="left_menu">其他</div>
	</div>
	<div class="left_block3">
		<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
		<button class="login">登录</button>
	</div>
</div>
<div class="right_content" >
	<form id="form1">
		<input type="hidden" id="curIndex" value="0"/>
		<input type="hidden" id="maxPage" value="0"/>
		<input type="hidden" id="curId" name="curId">
		<div class="top-bar">
			<div style="float:left;">用户通用命令库<br>
				<span  class="text_color"  style="font-size: 13px;">General&nbsp;command&nbsp;library</span>
			</div>

			<div class="top_input" style="float:right; height:36px;margin-top: 12px;">
				<div>
					<select class="chtype" id="condition1">
						<option value="0" select>选择类型筛选</option>
						<option value="1">1</option>
						<option value="2">2</option>
					</select>
				</div>
				<button class="search">搜索</button>
				<input class="s_input" type="text" id="condition2" placeholder="输入关键字搜索"/>
			</div>
		</div>
		<!-- -->
		<div class="table-box" >
			<div class="headerTableDiv">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
					<colgroup>
						<col width="10%">
						<col width="10%">
						<col width="47%">
						<col width="23%">
						<col width="10%">
					</colgroup>
					<tr>
						<td>
							<div class="text_name" style="">编号</div>
							<div class="text_color">Serial&nbsp;number</div>
						</td>
						<td>
							<div class="text_name" style="">类型</div>
							<div class="text_color">Type</div>
						</td>
						<td>
							<div class="text_name" style="">命令</div>
							<div class="text_color">The&nbsp;command</div>
						</td>
						<td>
							<div class="text_name" style="">备注</div>
							<div class="text_color">note</div>
						</td>
						<td>
							<div class="text_name"style="">操作</div>
							<div class="text_color" style="">operation</div>
						</td>
					</tr>
				</table>
			</div>
			<div class="contentTableDiv">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
					<colgroup>
						<col width="10%">
						<col width="10%">
						<col width="47%">
						<col width="23%">
						<col width="10%">
					</colgroup>
					<tbody id="contentTableTbody"></tbody>
				</table>
			</div>
		</div>
		<!-- 分页 -->
		<div class="page-split">
			<div id="page"></div>
			<div class="page_count text_color" style="float:right;font-size:13px;">共96条/11页</div>
		</div>
		<!-- 底部 -->
		<div class="bottom">
			<div class="f0">
				<div>编辑</div>
				<div style="color:#DBDDDC;">Edit</div>
			</div>
			<div class="edit" style="height:150px;">
				<div class="f1">
					<div>类型&nbsp;:</div>
					<div>
						<select id="newType" >
							<option value="0" selected>选择类型</option>
							<option value="1">1</option>
							<option value="2">2</option>
						</select>

					</div>
				</div>
				<div class="f2">
					<div>备注&nbsp;:</div>
					<div><input id="newNote" type="text" placeholder="输入备注信息" value=""></div>
				</div>
				<div class="f3">
					<div>命令&nbsp;:</div>
					<div style="width:90%;"><textarea id="newCommand" class="contentTextTextArea2" placeholder="输入命令内容"></textarea></div>
				</div>
			</div>
			<div class="bt-btn" style="position: absolute;width:100%;bottom:20px;left:10px;">
				<button class="btn-s" type="button" onclick="connect()">立即执行</button>
				<button class="btn-s" type="button" onclick="update()" >保存</button>
			</div>
		</div>
	</form>
</div>
<!--查询弹窗-->
<div class="pop_content" id="showInfo" style="display:none;">
	<div class="pop_block">
		<div class="pop_barInfo" >
			<div style="font-size: 18px;">搜索</div>
		</div>
		<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop();"></div>
		<div class="pop_input">
			<button class="searchAll" type="button">搜索</button>
			<input class="s_input" id="condition" type="text" name="" placeholder="输入编号或名称搜索"/>
			<button class="s_right" onclick="reset()" type="button">重置</button>
		</div>
		<div class="headerTableDiv2">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
				<colgroup>
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
				</colgroup>
				<tr>
					<td><div>序号</div></td>
					<td><div>APP名称</div></td>
					<td><div>类型</div></td>
					<td><div>状态</div></td>
					<td><div>备注</div></td>
				</tr>
			</table>
		</div>
		<div class="contentTableDiv2">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
				<colgroup>
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
				</colgroup>
				<tbody class="popTbody"></tbody>
			</table>
		</div>
	</div>
</div>
<!--CMD弹窗-->
<div class="pop_content3" id="showInfo3" style="display:none;">
	<div class="pop_block3">
		<div class="pop_barInfo" >
			<div style="font-size: 14px;color:#434C53">控制台</div>
			<div style="font-size: 12px;color:#989898">The&nbsp;console</div>
		</div>
		<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop3();"></div>
		<div class="contentText">
			<textarea class="contentTextTextArea"></textarea>
		</div>
		<div class="pop_excute">
			<button class="excute" type="button">立即执行</button>
			<input class="ex_input" id="condition" type="text" name="" placeholder="输入命令"/>
			<button class="ex_reset" type="button">隐藏</button>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
    $(".ex_reset").on("click",function(){
        $(".pop_excute").hide();
    });
    $(function(){
        $(".search").on("click",function(){
            alert("搜索");
            var curIndex = $("#curIndex").val();
            var name_like1 = $("#condition1").val();
            var name_like2 = $("#condition2").val();
            alert(name_like1+name_like2);
            getList(curIndex,name_like1,name_like2);
        });
    });

    /*加载列表*/
    $(function(){
        /*var curIndex=$("#curIndex").val();
        getList(curIndex);
*/
        $("#newType").val("");
        $("#newCommand").val("");
        $("#newNote").val("");

        var dataArr = [];
        for(i=1;i<=20;i++){
            var dataJson = {};
            dataJson.id = i;
            if(i<10){
                dataJson.no= "NO.0"+i;
            }else{
                dataJson.no = "NO."+i;
            }
            dataJson.type = "string"+i;
            dataJson.command = "string"+i;
            dataJson.recentTime= i;
            dataJson.note= "string"+i;
            dataArr.push(dataJson);
        }
        addData(dataArr,990,25);

    });


    function edit(id){
        alert("编辑加载数据到下面");
        alert(id);
        if(id==null) {
            alert("id不能为空!");
            return false;
        }
        /*var url = "deploy_topology/query";
       $.post(url,{id:id},"JSON").done(function(data){
           if(data){
                 $("#curId").val(id);
                $("#newType").val(type);
                $("#newCommand").val(command);
                $("#newNote").val(note);
               }else{
               alert("未知错误");
           }
       });*/
        /*==============================================*/
        $("#newType").val($("#type").val());
        $("#newNote").val($("#note").val());
        $("#newCommand").val($("#newCommand").val());

    }
    function connect(){
        alert("立即执行");
    }
    function update(){
        alert("保存");
        var url="update";
        var parms={
            id:  $("#curId").val(),
            type:  $("#newType").val(),
            command:   $("#newCommand").val(),
            note:	$("#newNote").val()
        };
        alert(parms.type+parms.command+parms.note);
        /*$.post(url,parms,"JSON").done(function(data){
            if(data){
                alert("更新成功");
                window.location.href="html/generalCMD.html"
                $("#newType").val("");
                $("#newCommand").val("");
                $("#newNote").val("");
            }
        });*/
    }
    function delete2(id){
        alert("删除");
        alert(id);
        if(id==null){
            aler("id不能为空!");
            return false;
        }
        var url="user_common_command/delete";
        $.post(url,{id:id},"JSON").done(function(data){
            if(data){
                window.location.href="../html/commonCMD.html";
            }
        });
    }
    /*列表内容*/
    function addData(data,total,pageSize){
        var maxPage=Math.ceil(total/pageSize);
        pageCal(1,maxPage,total);
        $("#maxPage").val(maxPage);
        $("#contentTableTbody").empty();
        var html = '';
        $.each(data,function(k,v){
            html += '<tr>';
            html += '<td><div id="no" class="app_no">'+v.no+'</div></td >';
            html += '<td><div id="type" class="app_text1" style="cursor:default;">'+v.type+'</div></td>';
            html += '<td style="text-indent: 0px;"><div id="command" class="text_color">'+v.command+'</div></td>';
            html += '<td ><div id="note">'+v.note+'</div></td>';
            html += '<td style="text-indent: 0px;">';
            html += '<a class="app_text edit" onclick="edit('+v.id+');">编辑</a>';
            html += '<a class="app_del" onclick="delete2('+v.id+');">删除</a>';
            html += '</td>';
            html += '</tr>';
        });
        $("#contentTableTbody").append(html);
    }
    /*function getList(curIndex,name_like1,name_like2){
        /*var url = "deploy_topology/query";
        $("#curIndex").val(curIndex);
        var param = {params:{name_like:[name_like1,name_like2]},pageable:{page:0,start:0,size:25}};
        $.post(url,param,"JSON").done(function(data){
            if(data){
                var dataList = data.data;
                   if(dataList&&dataList.length>0){
                    addData(dataList,data.total,25)
                }
            }
        });
    }*/
    /*CMD弹窗*/
    function open_pop2(){
        $("#showInfo3").show();
    }
    function exit_pop3(){
        $("#showInfo3").hide();
    }
    /*查询弹窗*/
    function open_pop(){
        $("#showInfo").show();
        $(".searchAll").on("click",function () {
            alert("全局搜索");
            /* var url = 'deploy_topology/get_by_id';
		   var param = {condition:$("#condition").val()};
		   $.post(url,param,"JSON").done(function(data){
			   if(data&&data.length>0){
				   addDataPop(data)
					tableSum();
			   }
		   }); */
            var dataArr = [];
            for(i=1;i<=20;i++){
                var dataJson = {};
                dataJson.no = i;
                dataJson.name = "OX8E_"+i;
                dataJson.type="string";
                dataJson.state = i;
                dataJson.note = "string";
                dataArr.push(dataJson);
            }
            addDataPop(dataArr);
            tableSum();
        });
    }
    function reset(){
        $("#condition").val("");
    }
    function addDataPop(data){
        $(".contentTableDiv2 .popTbody").empty();
        var html = '';
        $.each(data,function(k,v){
            html += '<tr>';
            html += '<td>'+v.no+'</td>';
            html += '<td>'+v.name+'</td>';
            html += '<td>'+v.type+'</td>';
            html += '<td>'+v.state+'</td>';
            html += '<td>'+v.note+'</td>';
            html += '</tr>';
        });
        $(".contentTableDiv2 .popTbody").append(html);
    }
    function exit_pop(){
        $("#showInfo").hide();
    }
    function tableSum() {
        $(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
        if ($(".contentTableDiv2").scrollTop() > 0) {
            var scrollWidth = getScrollbarWidth();
            $(".contentTableDiv2").css("right",(20-scrollWidth)+"px");
        } else {
            $(".contentTableDiv2 table").css("width", "100%");
        }
        $(".contentTableDiv").scrollTop(0);// 滚动条返回顶部
    }

    $(function(){
        tableSum();
    });

    $(window).resize(function() {
        tableSum();
    });

    function getScrollbarWidth() {
        var odiv = document.createElement('div'),//创建一个div
            styles = {
                width: '100px',
                height: '100px',
                overflowY: 'scroll'//让他有滚动条
            }, i, scrollbarWidth;
        for (i in styles) odiv.style[i] = styles[i];
        document.body.appendChild(odiv);//把div添加到body中
        scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
        odiv.remove();//移除创建的div
        return scrollbarWidth;//返回滚动条宽度
    }
    /*分页*/
    function gotoNext(){
        var curIndex = $("#curIndex").val();
        if(curIndex == $("#maxPage").val()-1){
            return false;
        }
        getList(curIndex+1);
    }
    function gotoPrev(){
        var curIndex = $("#curIndex").val();
        if (curIndex==0){
            return false;
        }
        getList(curIndex-1);
    }
    function pageCal(curIndex,pageCount,totalCount){
        pageUtil.initPage('page',{
            totalCount:pageCount,//总页数，一般从回调函数中获取。如果没有数据则默认为1页
            curPage:curIndex,//初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
            showCount:9,//分页栏显示的数量
            pageSizeList:[5,10,15,20,25,30],//自定义分页数，默认[5,10,15,20,50]
            defaultPageSize:1,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
            isJump:false,//是否包含跳转功能，默认false
            isPageNum:false,//是否显示分页下拉选择，默认false
            isPN:true,//是否显示上一页和下一面，默认true
            isFL:false,//是否显示首页和末页，默认true
            jump:function(curPage,pageSize){//跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
                console.log(curPage,pageSize);
            },
        });
        $(".page-split .page_count").html('共'+totalCount+'条/'+pageCount+'页');
    }

</script>
</html>
